<!--指标趋势-->

<template>
  <div class="target-tendency-comp w-h-full" :style="{
    backgroundColor: component.compConfigData.backgroundColor,
    border: component.compConfigData.borderWidth + 'px' + ' solid' + ' ' + component.compConfigData.borderColor,
    borderRadius: component.compConfigData.borderRadius + 'px',
    boxShadow: '0px 0px ' + component.compConfigData.shadowBlur + 'px ' + component.compConfigData.shadowColor
  }">
    <p class="w-h-full" :style="{
      alignItems: alignItems,
      justifyContent: justifyContent,
    }">
      <span :style="{
        color: component.compConfigData.titleStyle.color,
        fontSize: component.compConfigData.titleStyle.fontSize + 'px',
        fontWeight: component.compConfigData.titleStyle.fontWeight,
        margin: component.compConfigData.titleStyle.margin,
      }">{{component.compConfigData.titleStyle.text}}</span>
      <Icon :size="component.compConfigData.iconStyle.size"
            :class="{'mirrorRotateVertical': isMirror}"
            :custom="'targetTendencyFont ' + iconClazz"
            :style="{
              color: iconColor
            }"></Icon>
      <span :style="{
        color: valueColor,
        fontSize: component.compConfigData.valueStyle.fontSize + 'px',
        fontWeight: component.compConfigData.valueStyle.fontWeight,
        margin: component.compConfigData.valueStyle.margin
      }">{{runCustomFilter(component.compConfigData.ds_resultObj)[0].value}}{{component.compConfigData.valueStyle.suffixText}}</span>
    </p>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import './iconfont/iconfont.css'

  const _this = {
    name: 'TargetTendencyComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '2.0',
      configDataTemp: Object.assign({

        backgroundColor: '',
        borderColor: '',
        borderWidth: 0,
        borderRadius: 0,
        shadowColor: '',
        shadowBlur: 0,
        textAlign: 'center',
        writingMode: 'horizontal-tb',

        titleStyle: {
          text: '指标',
          color: '#fff',
          fontSize: 16,
          fontWeight: 'normal',
          margin: '0px 0px 0px 0px'
        },

        iconStyle: {
          clazz: 'ttFont-target2',
          size: 20,
          upColor: '#4caf50',
          equalColor: '#ffc107',
          downColor: '#f44336',
          syncValueColor: true
        },

        valueStyle: {
          color: '#fff',
          fontSize: 16,
          fontWeight: 'normal',
          margin: '0px 0px 0px 0px',
          baseValue: 0,
          suffixText: '%',
        },

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            "value": 20
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      }
    },
    computed: {
      alignItems () {
        if (this.component.compConfigData.writingMode == 'horizontal-tb') {
          return 'center'
        }else if (this.component.compConfigData.writingMode == 'vertical-rl') {
          if (this.component.compConfigData.textAlign == 'flex-start') {
            return 'flex-end'
          }else if (this.component.compConfigData.textAlign == 'flex-end') {
            return 'flex-start'
          }else {
            return 'center'
          }
        }
      },
      justifyContent () {
        if (this.component.compConfigData.writingMode == 'horizontal-tb') {
          return this.component.compConfigData.textAlign
        }else if (this.component.compConfigData.writingMode == 'vertical-rl') {
          return 'center'
        }
      },
      iconClazz () {
        let value = this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0].value;
        if (value == this.component.compConfigData.valueStyle.baseValue) {
          return 'ttFont-target0'
        }else {
          return this.component.compConfigData.iconStyle.clazz
        }
      },
      iconColor () {
        let value = this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0].value;
        if (value > this.component.compConfigData.valueStyle.baseValue) {
          return this.component.compConfigData.iconStyle.upColor
        } else if (value == this.component.compConfigData.valueStyle.baseValue) {
          return this.component.compConfigData.iconStyle.equalColor
        } else if (value < this.component.compConfigData.valueStyle.baseValue) {
          return this.component.compConfigData.iconStyle.downColor
        }
      },
      valueColor () {
        if (this.component.compConfigData.iconStyle.syncValueColor) {
          return this.iconColor
        }else {
          return this.component.compConfigData.valueStyle.color
        }
      },
      /**
       * 判断是否翻转图标
       */
      isMirror () {
        let value = this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0].value;
        if (value < this.component.compConfigData.valueStyle.baseValue) {
          return true
        }else {
          return false
        }
      }
    }
  };

  export default _this
</script>

<style lang="less" scoped>
  .target-tendency-comp {
    p {
      width: 100%;
      height: 100%;
      display: -webkit-flex;
      display: flex;
    }
  }
  .mirrorRotateVertical {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
  }
</style>
